<template>
  <div>
    <el-dialog title="同步数据" :visible.sync="syscheck" width="800px" left>
      <el-row>
        <el-card>
          <div slot="header" class="clearfix">
            <span style="color:#409EFF;: ;">同步时间选择器</span>
          </div>
          <span>考勤数据同步范围：</span>
          <el-date-picker
            v-model="time"
            type="daterange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd HH:mm:ss"
            align="right"
          >
          </el-date-picker>
          <el-button
            @click="syscheckdata"
            type="danger"
            icon="el-icon-search"
            style="margin-left: 20px"
            >开始同步
          </el-button>
        </el-card>
      </el-row>
      <el-row style="margin-top: 30px">
        <el-col :span="10" >
          <el-card >
            <div slot="header" class="clearfix">
              <span style="color: #409eff">同步部门选择器</span>
            </div>
            <check-report-tree
              :department="department"
              @handleCheckChange="handleCheckChange"
            ></check-report-tree>
          </el-card>
        </el-col>

        <el-col :span="13" style="margin-left: 30px">
          <el-card>
            <div slot="header" class="clearfix">
              <span style="color: #409eff">同步结果</span>
            </div>
            <el-table
              :data="sysdatastatus"
              style="width: 100%; margin-top: -20px"
            >
              <el-table-column prop="department" label="部门名称">
              </el-table-column>
              <el-table-column prop="status" label="同步状态" width="100">
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import CheckReportTree from "./CheckReportTree.vue";
export default {
  components: { CheckReportTree },
  props: ["department"],
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      syscheck: false,
      sysdep: [],
      sysdatastatus: [],
      time: [],
    };
  },

  methods: {
    // test(){

    //     let samble={"department":"11","status":"666"}

    //         this.sysdatastatus.push(samble);

    // },

    syscheckdata() {
      const that = this;
      if (that.sysdep.length == 0) {
        that.$message({
          showClose: true,
          message: "请先勾选需同步的部门",
          type: "error",
        });
      } else {
        that
          .$confirm("是否确认开始同步考勤数据信息?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            for (let index = 0; index < that.sysdep.length; index++) {
              var time;
              let datas = {
                depid: this.sysdep[index],
                stime: this.time[0],
                etime: this.time[1],
              };

              that.$axios
                .post("api/check/syncheck", datas)
                .then((response) => {
                  let sysdone = {
                    department: response.data,
                    status: "同步成功",
                  };

                  that.sysdatastatus.push(sysdone);
                })
                .catch(function (error) {
                  console.log(error);
                });


                
              clearTimeout(time);
              time = setTimeout(() => {
                this.$notify({
                  title: "提示",
                  message: "这是一条不会自动关闭的消息",
                  duration: 0,
                });
              }, 100);



            }
          })
          .catch(() => {
            that.$message({
              type: "info",
              message: "已取消",
            });
          });
      }
    },

    handleCheckChange(selectobjp) {
      let selectobj = selectobjp;
      //  提取部门id
      let selecarr = [];
      selectobj.forEach((item) => {
        selecarr.push(item.id);
      });
      this.sysdep = selecarr;
      console.log(this.sysdep);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>